<template>
    <div class="mainBox">
        <el-descriptions class="carOwnerInfo" title='车主信息' :column="3" border>
            <el-descriptions-item label='车牌号'>
                {{ detailModel.carNo }}
            </el-descriptions-item>
            <el-descriptions-item label='手机号码'>
                {{ detailModel.userMobile }}
            </el-descriptions-item>
            <el-descriptions-item label='姓名'>
                {{ detailModel.userName }}
            </el-descriptions-item>
            <el-descriptions-item label='车主ID'>
                {{ detailModel.userId }}
            </el-descriptions-item>
            <el-descriptions-item label='可奖励金额'>
                {{ detailModel.enableAwardAmt }}
            </el-descriptions-item>
            <el-descriptions-item label='可提现金额'>
                {{ detailModel.allowWithdrawAmt }}
            </el-descriptions-item>
            <el-descriptions-item label='已提现金额'>
                {{ detailModel.alreadyWithdrawAmt }}
            </el-descriptions-item>
            <el-descriptions-item label='阈值'>
                {{ detailModel.thresholdValue }}
            </el-descriptions-item>
            <el-descriptions-item label='预充金'>
                {{ detailModel.prechargedGold }}
            </el-descriptions-item>
            <el-descriptions-item label='用户上报金额'>
                {{ detailModel.userAmt }}
            </el-descriptions-item>
            <el-descriptions-item label='图片'>
                <el-button link type="primary" size="small" @click="imgDialog = true">
                    {{ "查看" }}
                </el-button>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="exchangeInfo" title='兑换信息' :column="3" direction="vertical" border>
            <div v-if="detailModel.state == 0">
                <el-descriptions-item label='消费时间'>
                    <el-form-item>
                        <el-date-picker v-model="examineParam.costDate" type="datetime" placeholder="请选择日期时间"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label='消费金额'>
                    <el-input-number v-model="examineParam.checkAmt" :precision="2" :min="0" :controls="false" />
                </el-descriptions-item>
            </div>
            <div v-else>
                <el-descriptions-item label='消费时间' min-width="400">
                    {{ detailModel.costDate ? detailModel.costDate : "—— ——" }}
                </el-descriptions-item>
                <el-descriptions-item label='消费金额' min-width="400">
                    {{ detailModel.costAmt ? detailModel.costAmt : "—— ——" }}
                </el-descriptions-item>
                <el-descriptions-item label='实际奖励金额' v-if="detailModel.state == 1" min-width="400">
                    {{ detailModel.awardAmt }}
                </el-descriptions-item>
            </div>
        </el-descriptions>
        <div class="btnBox">
            <span v-if="detailModel.state == 0">
                <el-button type="primary" color="#ea5b24" @click="toExamine(1)" v-if="pinia.isShow[111]">审核通过</el-button>
                <el-button type="primary" color="#ea5b24" @click="examineDialogVisible = true"
                    v-if="pinia.isShow[112]">审核不通过</el-button>
            </span>
            <el-button type="primary" color="#ea5b24" @click="emit('packConfigBack')">返回</el-button>
        </div>

        <!-- 审核不通过dialog -->
        <el-dialog v-model="examineDialogVisible" title="审核不通过" center="true" modal="true" width="400px">
            <el-form :model="examineParam" label-width="80" label-position="right">
                <el-form-item label="失败原因:">
                    <el-input v-model="examineParam.note" type="textarea" autocomplete="off" style="width: 250px;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" color="#ea5b24" @click="toExamine(2)">确定</el-button>
                    <el-button type="primary" color="#ea5b24" @click="examineDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 图片展示dialog -->
        <el-dialog v-model="imgDialog" width="500px" draggable center :show-close="false">
            <div v-if="imgDialog">
                <el-image :src="detailModel.pictureUrl" :preview-src-list="srcList" />
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { findUploadOrderByIdApi, uploadReviewApi } from "../../../api/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 父级传递过来的参数
const props = defineProps({
    orderInfo: Object,
});
//父级传递的方法
const emit = defineEmits(['packConfigBack']);

// 照片dialog控制
const imgDialog = ref(false);
const srcList = [];
// 订单详情
let detailModel = reactive({
    carNo: null,
    userMobile: null,
    userName: null,
    userId: null,
    enableAwardAmt: null,
    allowWithdrawAmt: null,
    alreadyWithdrawAmt: null,
    pictureUrl: null,
    costDate: null,
    costAmt: null,
    awardAmt: null,
    state: null,
    thresholdValue: null,
    prechargedGold: null,
    userAmt: null,
});

// 审核dialog控制
const examineDialogVisible = ref(false);
// 审核参数
const examineParam = reactive({
    carNo: null,
    checkAmt: null,
    checkInfoId: null,
    costDate: null,
    note: null,
    state: null,
});


// 查询账单操作详情信息
const findOrderInfo = () => {
    findUploadOrderByIdApi({ checkInfoId: examineParam.checkInfoId }).then((res) => {
        if (res.data.code === 2000) {
            if (res.data.data) {
                detailModel.carNo = res.data.data.carNo;
                detailModel.userMobile = res.data.data.userMobile;
                detailModel.userName = res.data.data.userName;
                detailModel.userId = res.data.data.userId;
                detailModel.enableAwardAmt = res.data.data.enableAwardAmt;
                detailModel.allowWithdrawAmt = res.data.data.allowWithdrawAmt;
                detailModel.alreadyWithdrawAmt = res.data.data.alreadyWithdrawAmt;
                detailModel.pictureUrl = res.data.data.pictureUrl;
                detailModel.costDate = res.data.data.costDate;
                detailModel.costAmt = res.data.data.costAmt;
                detailModel.awardAmt = res.data.data.awardAmt;
                detailModel.state = res.data.data.state;
                detailModel.thresholdValue = res.data.data.thresholdValue;
                detailModel.prechargedGold = res.data.data.prechargedGold;
                detailModel.userAmt = res.data.data.userAmt;

                srcList.push(detailModel.pictureUrl);
            }
        } else {
            ElMessage.error("查询失败");
        }
    });
};

// 审核
const toExamine = (state) => {
    examineParam.carNo = detailModel.carNo;
    examineParam.state = state;
    if (examineParam.state === 1) {
        if (!examineParam.costDate) {
            ElMessage({ message: "请选择消费时间.", type: "warning" });
            return;
        }
        if (!examineParam.checkAmt) {
            ElMessage({ message: "请输入消费金额.", type: "warning" });
            return;
        }
        ElMessageBox.confirm(`是否确认通过审核?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            uploadReviewApi(examineParam).then((res) => {
                if (res.data.code === 2000) {
                    ElMessage({
                        message: "审核成功.",
                        type: "success",
                    });
                    findOrderInfo();
                    examineDialogVisible.value = false;
                } else {
                    switch (res.data.code) {
                        case 4000:
                            ElMessage.error("未找到兑换申请记录.");
                            break;
                        case 4001:
                            ElMessage.error("未找到有效订单.");
                            break;
                        case 4002:
                            ElMessage.error("未找到订单扩展信息.");
                            break;
                        case 4003:
                            ElMessage.error("车牌号与订单不匹配.");
                            break;
                        case 4007:
                            ElMessage.error("计算出奖励金额等于0，无法通过审核.");
                            break;
                        default:
                            ElMessage.error("审核失败.");
                            break;
                    }
                }
            });
        });
    }
    if (examineParam.state === 2) {
        if (!examineParam.note) {
            ElMessage({ message: "请输入不通过原因.", type: "warning" });
            return;
        }
        uploadReviewApi(examineParam).then((res) => {
            if (res.data.code === 2000) {
                ElMessage({
                    message: "审核成功.",
                    type: "success",
                });
                findOrderInfo();
                examineDialogVisible.value = false;
            } else {
                switch (res.data.code) {
                    case 4000:
                        ElMessage.error("未找到兑换申请记录.");
                        break;
                    case 4001:
                        ElMessage.error("未找到有效订单.");
                        break;
                    case 4002:
                        ElMessage.error("未找到订单扩展信息.");
                        break;
                    case 4003:
                        ElMessage.error("车牌号与订单不匹配.");
                        break;
                    case 4007:
                        ElMessage.error("计算出奖励金额等于0，无法通过审核.");
                        break;
                    default:
                        ElMessage.error("审核失败.");
                        break;
                }
            }
        });
    }
};


onMounted(() => {
    examineParam.checkInfoId = props.orderInfo.checkInfoId;
    findOrderInfo();
});
</script>

<style scoped>
.mainBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carOwnerInfo {
    width: 100%;
    margin-bottom: 60px;
}

.exchangeInfo {
    width: 80%;
    margin-bottom: 80px;
}

.btnBox {
    display: flex;
    justify-content: center;
}

.btnBox span {
    width: 240px;
    display: flex;
    justify-content: space-between;
    margin-right: 50px;

}
</style>
  